import {Avatar, Button, Card, Descriptions, List, message, Tabs} from 'antd';
import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {goto, isSuccess} from "@/utils/utils";
import {OpResourcesManager} from "@/services/api-functions";
import {SYS_ENUMS} from "@/utils/constants";

const ResourceDetail: React.FC<any> = (props) => {
  const {match: {params: {id}}} = props;

  const [resources, setResources] = useState<any>(undefined)
  const [auditLogs, setAuditLogs] = useState<any[]>([])

  const handleAudit = async (businessId: number, auditOperate: string = 'PASS', remark: string = '') => {
    try {
      if (isSuccess((await OpResourcesManager.resourcesAudit({
        businessId,
        auditOperate,
        remark
      }))?.code)) {
        message.success(auditOperate === SYS_ENUMS.RESOURCE_AUDIT_STATE.PASS.value ? '审核通过' : '审核拒绝');
        queryResourceDetail(businessId)
        return true;
      }
      return false
    } catch (error) {
      return false;
    }
  };

  const queryResourceDetail = (id: number)=>{
    if(id){
      OpResourcesManager.resourcesDetail(id).then(({code, data}) => {
        if (isSuccess(code)) {
          setResources(data)
        }
      })

      OpResourcesManager.resourcesAuditLog(id).then(({code, data}) => {
        if (isSuccess(code)) {
          setAuditLogs(data??[])
        }
      })
    }
  }

  useEffect(() => {
    queryResourceDetail(id)
  }, [id])

  return (
    <PageContainer>
      <Card bordered={false}
            actions={resources?.auditState === 'ING' ? [<span></span>, <span></span>,
              <span style={{float: 'right', paddingRight: 17}}>
                <Button style={{marginRight: 17}} onClick={() => handleAudit(resources?.id, SYS_ENUMS.RESOURCE_AUDIT_STATE.REFUSE.value)}>驳回</Button>
                <Button type='primary' onClick={() => handleAudit(resources?.id)}>通过</Button>
              </span>] : []}>
        <Tabs destroyInactiveTabPane={true} tabBarExtraContent={<Button type='primary' onClick={() => goto(`/resource/edit/${id}`)}>编辑</Button>}>
          <Tabs.TabPane forceRender tab='资源信息' key="RESOURCE_BASIC_INFO">
            <Descriptions title="基本信息" style={{ marginBottom: 32 }}>
              <Descriptions.Item label="资源ID">{resources?.id}</Descriptions.Item>
              <Descriptions.Item label="所属设计师">{resources?.nickName}</Descriptions.Item>
              <Descriptions.Item label="分类">{resources?.classification?SYS_ENUMS.RESOURCE_CLASSIFICATION[resources?.classification]?.text:'暂无'}</Descriptions.Item>
              <Descriptions.Item label="资源标题">{resources?.title}</Descriptions.Item>
              <Descriptions.Item label="标签">
                {
                  resources?.labelList?.map((tag: any, index: number) => `${index > 0 ? ',' : ''}${tag?.name}`)
                }
              </Descriptions.Item>
              <Descriptions.Item label="颜色">{resources?.color}</Descriptions.Item>
              <Descriptions.Item label="付费类型">{SYS_ENUMS.RESOURCE_PAYMENT_TYPE[resources?.paymentType]?.label}</Descriptions.Item>
              <Descriptions.Item label="是否加入会员免费">{resources?.membersFree === '1' ? '是' : '否'}</Descriptions.Item>
              <Descriptions.Item label="资源价格"><span style={{color:'red'}}>{resources?.sellingPrice}</span></Descriptions.Item>
              <Descriptions.Item label="原价">{resources?.originalPrice}</Descriptions.Item>
            </Descriptions>
          </Tabs.TabPane>
          <Tabs.TabPane forceRender tab='操作日志' key="RESOURCE_LOG">
            <List
              itemLayout="horizontal"
              dataSource={auditLogs}
              renderItem={({userDto, gmtCreate, auditRemark, type}) => <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={userDto?.avatarUrl} />}
                  title={userDto?.nickName}
                  description={`备注: ${auditRemark??'暂无'}`}
                />
                {/*<div>{`${SYS_ENUMS.RESOURCE_AUDIT_STATE[auditOperate].label}   ${gmtCreate} `}</div>*/}
                <div>{`${SYS_ENUMS.OPERATE_TYPE[type]?.label}   ${gmtCreate} `}</div>
              </List.Item>}
            />
          </Tabs.TabPane>
        </Tabs>

      </Card>
    </PageContainer>
  );
};

export default ResourceDetail;
